<template>
  <div class="wrapper">
    <div class="machine-chart" @click="$emit('shwDeviceNum', 2)">
      <v-chart :options="machineChartOptions"></v-chart>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    machineChartData: {
      type: Array
    }
  },
  computed: {
    machineChartOptions() {
      const res = this.machineChartData
      if (res) {
        const dataY = []
        const dataX = []
        res.map(item => {
          dataX.push(item.hospitalName)
          dataY.push(item.deviceUsageRatio.toFixed(2))
        })
        return {
          backgroundColor: 'transparent',
          title: {
            text: '昨日上机率',
            left: '0px',
            top: '0',
            bottom: '0px',
            textStyle: {
              color: '#666',
              fontSize: 16,
              fontWeight: '700'
            }
          },
          grid: {
            left: '30px',
            top: '60px',
            bottom: '59px',
            right: '0%'
          },
          tooltip: {
            trigger: 'axis',
            formatter: params => {
              let result = ''
              params.forEach(item => {
                const markerHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background: linear-gradient(360deg, ${item.color.colorStops[1].color} 0%, ${item.color.colorStops[0].color} 100%);"></span>`
                result += `${item.axisValue}<br>${markerHtml}${item.data}%`
              })
              return result
            }
          },
          xAxis: {
            data: dataX, // ['2017', '2018', '2019', '2020'],
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#D1D1D1',
                width: 0.5 // 这里是为了突出显示加上的
              }
            },
            axisLabel: {
              rotate: -90,
              textStyle: {
                color: '#555', // '#8998AC',
                fontSize: 12
              }
            }
            //     axisLabel: {
            //   interval: 0,
            //   rotate: 40,
            //   color: '#333',
            // },
          },
          yAxis: [
            {
              name: '单位(%)', // 单位(个)
              nameTextStyle: {
                color: '#8998AC',
                padding: [0, 0, 0, 4]
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                textStyle: {
                  color: '#999',
                  fontSize: 12
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: '#f4f5f8' // 'rgb(245,245,245)' x轴网络线颜色
                }
              }
            }
          ],
          series: [
            {
              type: 'pictorialBar',
              barCategoryGap: '0%',
              symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
              barWidth: '65%',
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#4D7CFE'
                      },
                      {
                        offset: 1,
                        color: '#51C0F8'
                      }
                    ]
                    // global: false //  缺省为  false

                  }
                },
                emphasis: {
                  opacity: 1
                }
              },
              data: dataY,
              z: 10
            }
          ]
        }
      }
      return null
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.wrapper {
  .machine-chart {
    height: 230px;
  }
}
</style>
